<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <!-- 头部搜索框 -->
    <el-card class="spacing">
      <el-form label-width="120px">
        <el-row label="请输入内容">
          <el-col :span="8">
            <el-form-item>
              <template slot="label">
                <span class="label">司机账号:</span>
              </template>
              <el-input
                v-model.trim="form.account"
                placeholder="请输入司机账号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              <template slot="label">
                <span class="label">司机姓名:</span>
              </template>
              <el-input
                v-model.trim="form.name"
                placeholder="请输入司机姓名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              <template slot="label">
                <span class="label">司机手机号:</span>
              </template>
              <el-input
                v-model.trim="form.phone"
                placeholder="请输入司机手机号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item>
              <template slot="label">
                <span class="label">所属机构:</span>
              </template>
              <treeselect
                v-model="form.agentId"
                :options="agencyOptions"
                :normalizer="normalizer"
                :searchable="true"
                style="width: 100%"
                placeholder="请选择所属机构"
                no-options-text="暂无数据"
                no-results-text="暂无数据"
                @select="selectAgency"
                @open="open"
                @close="close"
              />
              <img
                ref="arrow"
                src="../../assets/pullDown.png"
                style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="elbutton">
              <el-button
                type="warning"
                style="width: 90px"
                @click="searchfor"
              >搜索</el-button>
              <el-button
                style="width: 90px"
                @click="resetting"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 列表数据 -->
    <el-card class="tabulation">
      <template>
        <el-table
          v-loading="isLoading"
          :data="list"
          border
          style="width: 100%"
        >
          <div
            v-show="(!list || list.length <= 0) && !isLoading "
            slot="empty"
          >
            <img
              src="@/icons/pic-kong@2x.png"
              alt="img"
              style="margin-top: 20px;width: 25%;height: 25%;"
            >
            <p
              style="
                      margin-top: -20px;
                      padding-bottom: 0px;
                      "
            >这里空空如也</p>
          </div>
          <el-table-column
            type="index"
            :index="indexs"
            label="序号"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="司机账号"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="司机姓名"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="司机电话"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="truck.licensePlate"
            label="关联车辆"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="agency.name"
            label="所属机构"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="工作状态"
            width="200"
          >
            <template #default="{ row }">
              <span
                :class="{
                  redRest: row.workStatus === 0,
                  redsWork: row.workStatus === 1
                }"
              ></span>
              {{ row.workStatus === 0 ? '休息' : '上班' }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="view(row.userId)"
              >查看</el-button>
              <span class="line">|</span>
              <el-button
                type="text"
                size="small"
                @click="handleWayllDetail(row)"
              >配置车辆</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页联动 -->
      <div class="block">
        <el-pagination
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹框 -->
    <carConfigVue
      :is-dialog.sync="isDialog"
      :row-list="rowList"
    ></carConfigVue>
  </div>
</template>
<script>
import { driverList } from '@/api/transit'
import carConfigVue from './components/car-config.vue'
import { agencyList } from '@/api/institutions'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Courses',
  components: {
    carConfigVue,
    Treeselect
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      agencyOptions: [],
      // 弹窗
      isDialog: false,
      // 加载效果
      isLoading: false,
      // // 司机账号
      // driverAccount: '',
      // // 司机姓名
      // driverName: '',
      // // 司机手机号
      // phoneNumber: '',

      // 总数据
      total: 0,
      // 获取司机分页数据 传的参数
      form: {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        // 搜索下拉树桩图的数据
        agentId: null
      },
      // 接受司机分页 返回的数据
      list: [],
      select: '',
      // 弹窗需要的id
      rowList: {}
    }
  },
  created() {
    this.driverLists()
    this.getAgencyList()
  },
  methods: {
    selectAgency(val) {
      this.form.agentId = val.id
    },
    // 打开所属机构下拉框
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    // 关闭所属机构下拉框
    close() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    },
    // 获取起始/目的地机构列表数据
    async getAgencyList() {
      // 读取数据
      const { data: res } = await agencyList()
      // 获取数据给options
      this.agencyOptions = JSON.parse(res)
    },
    /**
     * 车辆配置提醒框
     */
    handleWayllDetail(row) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('p', { style: 'margin-bottom: 5px' }, '配置车辆需满足以下条件：'),
          h('span', { style: 'margin-right:80px' }, '① 司机信息已完善'),
          h('span', null, '② 司机已设置排班'),
          h('p', null, '③ 司机绑定车辆未在启用状态')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.openDilaog()
        // this.userid = row.userId
        this.rowList = row
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 打开弹窗
     */
    openDilaog() {
      this.isDialog = true
    },
    /**
     * 跳转司机详情
     */
    view(id) {
      this.$router.push({
        path: 'driver-detail',
        query: {
          id: id
        }
      })
    },
    /**
     * 重置表单
     */
    resetting() {
      // 重置表单
      this.form = {
        page: 1,
        pageSize: 10,
        account: null,
        name: null,
        phone: null,
        // 搜索下拉树桩图的数据
        agentId: null
      }
      // // 司机账号
      // this.driverAccount = ''
      // // 司机姓名重置
      // this.driverName = ''
      // // 司机手机号重置
      // this.phoneNumber = ''
      // // // 搜索下拉树桩图的数据
      // // this.agentId = ''
      // 渲染数据
      this.driverLists()
    },
    /**
     * 表单搜索
     */
    searchfor() {
      this.form.page = 1
      // this.form.account = this.driverAccount
      // this.form.name = this.driverName
      // this.form.phone = this.phoneNumber
      this.driverLists()
    },
    /**
     * 自定义页数 点击联动
     */
    handleSizeChange(val) {
      // 页的条数 联动
      this.form.pageSize = +val
      this.driverLists()
    },
    handleCurrentChange(val) {
      // 页数 联动
      this.form.page = +val
      this.driverLists()
    },
    /**
     * 计算自定义序号
     */
    indexs(index) {
      return (this.form.page - 1) * this.form.pageSize + index + 1
    },
    /**
     * 获取司机分页数据
     */
    async driverLists() {
      this.isLoading = true
      // 获取接口
      const { data } = await driverList(this.form)
      // 获取总数量
      this.total = +data.counts
      // 获取司机分页数据信息
      this.list = data.items
      this.isLoading = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card {
  overflow: initial;
  width: 1280px;
  margin-top: 20px;
  margin-left: 22px;
  border-radius: 5px;
  // padding-right: 30px;
  // padding-bottom: -100px;
  box-shadow: none;
}
.label {
  font-weight: 400;
}
.elbutton {
  margin-left: -70px;
  //   padding-bottom: -20px;
}
.redRest {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 10px;
  margin-right: 5px;
  background-color: red;
}
.redsWork {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 10px;
  margin-right: 5px;
  background-color: #1dc779;
}
.line {
  color: #dcdfe6;
  margin: 0 8px;
}
.block {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  // margin-bottom: 20px
}
/deep/ .tabulation {
  margin-top: 20px;
  padding-bottom: 60px;
}
/deep/ .el-card__body {
  padding-bottom: 0;
}
</style>

